<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>实有人口</a-breadcrumb-item>
    </a-breadcrumb>

    <a-row class="pd20 mt20">
      <a-col :span="5">
        人口姓名：
        <a-input placeholder="请输入" v-model="queryForm.humanName" />
      </a-col>
      <a-col :span="5">
        联系方式：
        <a-input placeholder="请输入" v-model="queryForm.phone" />
      </a-col>
      <a-col :span="5">
        人口类型：
        <a-select
          v-model="queryForm.humanClassId"
          placeholder="请选择"
          style="width: 60%"
          @change="handleTabChange"
        >
          <a-select-option
            v-for="item in peopleTypeList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>

      <a-col :span="5">
        是否租房：
        <a-select
          v-model="queryForm.rented"
          placeholder="请选择"
          style="width: 60%"
        >
          <a-select-option
            v-for="item in rentList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        身份证号码：
        <a-input placeholder="请输入" v-model="queryForm.idCard" />
      </a-col>

      <a-col :span="5">
        常住地址：
        <a-input placeholder="请输入" v-model="queryForm.addr" />
      </a-col>

      <a-col :span="10">
        创建时间范围：
        <a-range-picker
          style="width: 330px; margin-left: 10px"
          v-model="dateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
        />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getList">查询</a-button>&emsp;&nbsp;
        <a-button @click="reset">重置</a-button>
      </a-col>
    </a-row>

    <a-row class="pd20 mt20">
      <div class="flex-between">
        <a-tabs v-model="activeTab" @change="handleTabChange">
          <a-tab-pane
            v-for="item in peopleTypeList"
            :key="item.value"
            :tab="item.label"
          />
        </a-tabs>
        <div class="flex-end">
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:syrk:import']"
            >导入</a-button
          >
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:syrk:export']"
            >导出</a-button
          >
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:syrk:add']"
            >添加</a-button
          >
        </div>
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 700 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :row-key="(record) => record.id"
        >
          <template slot="idCard" slot-scope="text, record">
            <div class="phone-cell">
              <span>{{
                record.showIdCard ? text : $maskChineseIdCard(text)
              }}</span>
              <a-icon
                :type="record.showIdCard ? 'eye-invisible' : 'eye'"
                @click.stop="toggleIdNumberVisibility2(record)"
              />
            </div>
          </template>
          <template slot="phone" slot-scope="text, record">
            <div class="phone-cell">
              <span>{{
                record.showPhone ? text : $desensitizePhone(text)
              }}</span>
              <a-icon
                :type="record.showPhone ? 'eye-invisible' : 'eye'"
                @click.stop="togglePhoneVisibility(record)"
              />
            </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <a @click="handleView(record)" v-hasPermi="['zhonghe:syrk:view']"
              >查看</a
            >
            <a-divider type="vertical" />
            <a @click="handleEdit(record)" v-hasPermi="['zhonghe:syrk:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(record)"
              class="red"
              v-hasPermi="['zhonghe:syrk:del']"
              >删除</a
            >
          </template>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>

    <a-modal
      :title="title"
      :visible="dialogVisible"
      width="70%"
      :bodyStyle="{ padding: '8px 24px' }"
      @cancel="dialogVisible = false"
    >
      <a-spin :spinning="formLoading">
        <a-form
          :form="form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          class="compact-form"
        >
          <!-- 人口信息 -->
          <div class="form-title">人口信息</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="姓名">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.humanName }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'humanName',
                    { rules: [{ required: true, message: '请输入姓名' }] },
                  ]"
                  placeholder="请输入姓名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="性别">
                <template v-if="type === 'View'">
                  {{
                    (
                      (currentRecord &&
                        genderList.find(
                          (item) => item.value === currentRecord.gender
                        )) || { label: "" }
                    ).label
                  }}
                </template>
                <a-select
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'gender',
                    { rules: [{ required: true, message: '请选择性别' }] },
                  ]"
                  placeholder="请选择性别"
                >
                  <a-select-option
                    v-for="item in genderList"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="人口类型">
                <template v-if="type === 'View'">
                  {{
                    (
                      (currentRecord &&
                        peopleTypeList.find(
                          (item) => item.value === currentRecord.humanClassId
                        )) || { label: "" }
                    ).label
                  }}
                </template>
                <a-select
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'humanClassId',
                    { rules: [{ required: true, message: '请选择人口类型' }] },
                  ]"
                  placeholder="请选择人口类型"
                  @change="handleHumanClassIdChange"
                >
                  <a-select-option
                    v-for="item in peopleTypeList.filter(
                      (item) => item.value !== ''
                    )"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="personType !== 'overseas'">
              <a-form-item label="身份证号码">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.idCard }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'idCard',
                    {
                      rules: [{ required: true, message: '请输入身份证号码' }],
                    },
                  ]"
                  placeholder="请输入身份证号码"
                  @change="handleIdCardChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="出生日期">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.bornDate }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="['bornDate', { rules: [{ required: false }] }]"
                  :disabled="personType !== 'overseas'"
                  placeholder="自动识别出生年龄"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="年龄">
                <template v-if="type === 'View'">
                  {{ currentRecord && getAge(currentRecord.idCard) }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="['age', { rules: [{ required: false }] }]"
                  :disabled="personType !== 'overseas'"
                  placeholder="自动识别出生年龄"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="常住地址">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.addr }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'addr',
                    { rules: [{ required: true, message: '请输入常住地址' }] },
                  ]"
                  placeholder="请输入常住地址"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="联系方式">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.phone }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'phone',
                    { rules: [{ required: true, message: '请输入联系方式' }] },
                  ]"
                  placeholder="请输入联系方式"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="是否租房">
                <template v-if="type === 'View'">
                  {{
                    currentRecord && currentRecord.rented === 1 ? "是" : "否"
                  }}
                </template>
                <a-radio-group
                  v-else
                  style="width: 100%"
                  @change="handleRentedChange"
                  v-decorator="[
                    'rented',
                    { rules: [{ required: true, message: '请选择是否租房' }] },
                  ]"
                >
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="0">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="备注">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.descStr }}
                </template>
                <a-input
                  v-else
                  v-decorator="['descStr']"
                  placeholder="请输入备注"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 详细信息 -->
          <div class="form-title">{{ dialogTitle }}</div>
          <!-- 户籍信息 -->
          <a-row :gutter="16" v-if="personType === 'houseHold'">
            <a-col :span="12">
              <a-form-item label="籍贯">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyCity }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyCity',
                    { rules: [{ required: true, message: '请输入籍贯' }] },
                  ]"
                  placeholder="请输入籍贯"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户主姓名">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyHeadName }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyHeadName',
                    { rules: [{ required: true, message: '请输入户主姓名' }] },
                  ]"
                  placeholder="请输入户主姓名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户主联系方式">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyHeadPhone }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyHeadPhone',
                    {
                      rules: [
                        { required: true, message: '请输入户主联系方式' },
                      ],
                    },
                  ]"
                  placeholder="请输入户主联系方式"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户主身份证">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyHeadIdCard }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyHeadIdCard',
                    {
                      rules: [{ required: true, message: '请输入户主身份证' }],
                    },
                  ]"
                  placeholder="请输入户主身份证"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户籍编码">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyCode }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyCode',
                    { rules: [{ required: true, message: '请输入户籍编码' }] },
                  ]"
                  placeholder="请输入户籍编码"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="本人婚姻状况">
                <template v-if="type === 'View'">
                  {{
                    (
                      (currentRecord &&
                        marredList.find(
                          (item) => item.value === currentRecord.marred
                        )) || { label: "" }
                    ).label
                  }}
                </template>
                <a-select
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'marred',
                    {
                      rules: [
                        { required: true, message: '请选择本人婚姻状况' },
                      ],
                    },
                  ]"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="item in marredList"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="本人政治面貌">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.governmentStatus }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'governmentStatus',
                    {
                      rules: [
                        { required: true, message: '请输入本人政治面貌' },
                      ],
                    },
                  ]"
                  placeholder="请输入本人政治面貌"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="本人学历">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.education }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'education',
                    { rules: [{ required: true, message: '请输入本人学历' }] },
                  ]"
                  placeholder="请输入本人学历"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户籍地">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyAddrLocation }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyAddrLocation',
                    { rules: [{ required: true, message: '请输入户籍地' }] },
                  ]"
                  placeholder="请输入户籍地"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户籍门（楼）详址">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyAddrDetail }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyAddrDetail',
                    {
                      rules: [
                        { required: true, message: '请输入户籍门（楼）详址' },
                      ],
                    },
                  ]"
                  placeholder="请输入户籍门（楼）详址"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="人户一致标识">
                <template v-if="type === 'View'">
                  {{
                    currentRecord && currentRecord.familyTrue === 1
                      ? "是"
                      : "否"
                  }}
                </template>
                <a-radio-group
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyTrue',
                    {
                      rules: [
                        { required: true, message: '请选择人户一致标识' },
                      ],
                    },
                  ]"
                >
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="0">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户号">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyNumber }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyNumber',
                    { rules: [{ required: true, message: '请输入户号' }] },
                  ]"
                  placeholder="请输入户号"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 流动人口信息 -->
          <a-row :gutter="16" v-if="personType === 'flow'">
            <a-col :span="12">
              <a-form-item label="籍贯">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyAddr }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyAddr',
                    { rules: [{ required: true, message: '请输入籍贯' }] },
                  ]"
                  placeholder="请输入籍贯"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户主姓名">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyHeadName }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyHeadName',
                    { rules: [{ required: true, message: '请输入户主姓名' }] },
                  ]"
                  placeholder="请输入户主姓名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="居住证号">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.liveIdCard }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'liveIdCard',
                    { rules: [{ required: true, message: '请输入居住证号' }] },
                  ]"
                  placeholder="请输入居住证号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="本人政治面貌">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.governmentStatus }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'governmentStatus',
                    {
                      rules: [
                        { required: true, message: '请输入本人政治面貌' },
                      ],
                    },
                  ]"
                  placeholder="请选择"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="本人学历">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.education }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'education',
                    { rules: [{ required: true, message: '请输入本人学历' }] },
                  ]"
                  placeholder="请选择"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户籍地">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyAddrLocation }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyAddrLocation',
                    { rules: [{ required: true, message: '请输入户籍地' }] },
                  ]"
                  placeholder="请输入户籍地"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="户籍门（楼）详址">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.familyAddrDetail }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'familyAddrDetail',
                    {
                      rules: [
                        { required: true, message: '请输入户籍门（楼）详址' },
                      ],
                    },
                  ]"
                  placeholder="请输入户籍门（楼）详址"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="流动原因">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.moveReason }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'moveReason',
                    { rules: [{ required: true, message: '请输入流动原因' }] },
                  ]"
                  placeholder="请输入流动原因"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="办证类型">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.applyType }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'applyType',
                    { rules: [{ required: true, message: '请输入办证类型' }] },
                  ]"
                  placeholder="请输入办证类型"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="流动人口证件号">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.moveHumanIdCard }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'moveHumanIdCard',
                    {
                      rules: [
                        { required: true, message: '请输入流动人口证件号' },
                      ],
                    },
                  ]"
                  placeholder="请输入流动人口证件号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="登记日期">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.pushTime }}
                </template>
                <a-date-picker
                  v-else
                  v-decorator="[
                    'pushTime',
                    { rules: [{ required: true, message: '请输入登记日期' }] },
                  ]"
                  showTime
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="证件有效期">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.idCardEffectiveDate }}
                </template>
                <a-date-picker
                  v-else
                  v-decorator="[
                    'idCardEffectiveDate',
                    {
                      rules: [{ required: true, message: '请输入证件有效期' }],
                    },
                  ]"
                  showTime
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="是否重点关注人员">
                <template v-if="type === 'View'">
                  {{
                    currentRecord && currentRecord.isPointHuman === 1
                      ? "是"
                      : "否"
                  }}
                </template>
                <a-radio-group
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'isPointHuman',
                    {
                      rules: [
                        { required: true, message: '请选择是否重点关注人员' },
                      ],
                    },
                  ]"
                >
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="0">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 境外人员信息 -->
          <a-row :gutter="16" v-if="personType === 'overseas'">
            <a-col :span="12">
              <a-form-item label="外文姓">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.foreignerName }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'foreignerName',
                    { rules: [{ required: true, message: '请输入外文姓' }] },
                  ]"
                  placeholder="请输入外文姓"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="外文名">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.foreignerLastName }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'foreignerLastName',
                    { rules: [{ required: true, message: '请输入外文名' }] },
                  ]"
                  placeholder="请输入外文名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="国籍（地区）">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.country }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'country',
                    {
                      rules: [
                        { required: true, message: '请输入国籍（地区）' },
                      ],
                    },
                  ]"
                  placeholder="请输入国籍（地区）"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="宗教信仰">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.religion }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'religion',
                    { rules: [{ required: true, message: '请输入宗教信仰' }] },
                  ]"
                  placeholder="请输入宗教信仰"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="来华目的">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.comeReason }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'comeReason',
                    { rules: [{ required: true, message: '请输入来华目的' }] },
                  ]"
                  placeholder="请输入来华目的"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="职业">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.job }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'job',
                    { rules: [{ required: true, message: '请输入职业' }] },
                  ]"
                  placeholder="请输入职业"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="服务处所">
                <template v-if="type === 'View'">
                  {{ currentRecord && currentRecord.serviceAddr }}
                </template>
                <a-input
                  v-else
                  style="width: 100%"
                  v-decorator="[
                    'serviceAddr',
                    { rules: [{ required: true, message: '请输入服务处所' }] },
                  ]"
                  placeholder="请输入服务处所"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
      <template slot="footer">
        <BtnFooter
          :loading="loading"
          :isShowOk="type !== 'View'"
          @cancel="dialogVisible = false"
          @ok="submit()"
        />
      </template>
    </a-modal>
  </div>
</template>

<script>
import qs from "qs";
import dictMixin from "@/mixins/dictMixin";
import crudMixin from "@/mixins/crudMixin";
import BtnFooter from "@/component/btnFooter.vue";
export default {
  mixins: [crudMixin, dictMixin],

  components: {
    BtnFooter,
  },
  data() {
    return {
      loading: false,
      dateRange: [],
      // API配置
      requestConfig: {
        Add: {
          method: "post",
          type: "formData",
          url: "/government-platform-center/human",
        },
        Edit: {
          method: "post",
          type: "formData",
          url: "/government-platform-center/human",
        },
        Del: {
          method: "post",
          type: "formData",
          url: "/government-platform-center/human/deleteById",
        },
        Get: {
          method: "get",
          type: "json",
          url: "/government-platform-center/human",
        },
        Detail: {
          method: "get",
          type: "json",
          url: "/government-platform-center/human",
        },
      },

      // 模态框配置
      modalConfig: {
        addTitle: "新增人口信息",
        editTitle: "修改人口信息",
        viewTitle: "查看人口信息",
        deleteConfirm: "确定要删除该人口信息吗？删除后不可恢复！",
      },

      // 表单对象
      form: this.$form.createForm(this),

      // 人口类型列表
      peopleTypeList: [{ value: "", label: "全部" }],

      // 是否租房列表
      rentList: [
        { value: 1, label: "是" },
        { value: 0, label: "否" },
      ],

      // 性别列表
      genderList: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
      ],

      // 表格列配置
      columns: [
        {
          title: "人口ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "姓名",
          dataIndex: "humanName",
          key: "humanName",
        },
        {
          title: "性别",
          dataIndex: "gender",
          key: "gender",
          customRender: (text, record) => {
            let findOne = this.genderList.find(
              (item) => item.value == record.gender
            );
            return (findOne && findOne.label) || "";
          },
        },
        {
          title: "人口类型",
          dataIndex: "humanClassId",
          key: "humanClassId",
          customRender: (text, record) => {
            let findOne = this.peopleTypeList.find(
              (item) => item.value == record.humanClassId
            );
            return (findOne && findOne.label) || "";
          },
        },
        {
          title: "是否租房",
          dataIndex: "rented",
          key: "rented",
          customRender: (text, record) => {
            return record.rented ? "是" : "否";
          },
        },
        {
          title: "常住地址",
          dataIndex: "addr",
          key: "addr",
        },
        {
          title: "联系方式",
          dataIndex: "phone",
          key: "phone",
          scopedSlots: { customRender: "phone" },
          width: 150,
        },
        {
          title: "身份证号码",
          dataIndex: "idCard",
          key: "idCard",
          scopedSlots: { customRender: "idCard" },
          width: 170,
        },
        {
          title: "出生日期",
          dataIndex: "bornDate",
          key: "bornDate",
        },
        {
          title: "年龄",
          dataIndex: "Name",
          key: "Name",
          customRender: (text, record) => {
            return this.getAge(record.idCard);
          },
        },
        {
          title: "备注",
          dataIndex: "descStr",
          key: "descStr",
        },
        {
          title: "最近更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "操作",
          key: "operation",
          width: 150,
          scopedSlots: { customRender: "operation" },
        },
      ],

      // 添加 activeTab
      activeTab: "", // 默认选中全部
      humanInfo: {
        houseHold: {
          addUrl: "/government-platform-center/humanFamily",
          editUrl: "/government-platform-center/humanFamily/edit",
          detailUrl: "/government-platform-center/humanFamily",
        },
        flow: {
          addUrl: "/government-platform-center/humanMove",
          editUrl: "/government-platform-center/humanMove/edit",
          detailUrl: "/government-platform-center/humanMove",
        },
        overseas: {
          addUrl: "/government-platform-center/humanForeigner",
          editUrl: "/government-platform-center/humanForeigner/edit",
          detailUrl: "/government-platform-center/humanForeigner",
        },
      },
      personType: "houseHold",
      formLoading: false,
    };
  },
  computed: {
    dialogTitle() {
      return this.personType === "houseHold"
        ? "户籍信息"
        : this.personType === "flow"
        ? "流动人口信息"
        : "境外人员信息";
    },
  },
  methods: {
    submit() {
      this.form.validateFields((err, values) => {
        if (err) return;
        this.loading = true;
        let url =
          this.type === "Add"
            ? this.humanInfo[this.personType].addUrl
            : this.humanInfo[this.personType].editUrl;
        this.$axios
          .post(url, qs.stringify({ ...this.currentRecord, ...values }))
          .then((res) => {
            if (res.data.code === 0) {
              this.$message.success("操作成功");
              this.getList();
              this.form.resetFields();
              this.dialogVisible = false;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    getPersonTypeList() {
      this.$axios
        .get("/government-platform-center/humanClass?current=99999&offset=1")
        .then((res) => {
          let data = (res.data.data || []).map((item) => {
            return {
              value: item.id,
              label: item.humanClassName,
            };
          });
          this.peopleTypeList = [{ value: "", label: "全部" }, ...data];
        });
    },
    addFn() {
      this.add();
    },
    delFn(val) {
      this.del(val);
    },
    async handleEdit(val) {
      this.type = "Edit";
      this.handleHumanClassIdChange(val.humanClassId);
      this.dialogVisible = true;

      // 等待对话框显示并完成渲染
      await this.$nextTick();

      try {
        this.formLoading = true;
        const res = await this.$axios
          .get(`${this.humanInfo[this.personType].detailUrl}/${val.id}`)
          .finally(() => {
            this.formLoading = false;
          });
        if (res.data.code === 0) {
          let { down, up } = res.data.data;
          this.currentRecord = {
            ...down,
            ...up,
            age: this.getAge(up.idCard),
          };
          // 确保表单已渲染后再设置值
          this.$nextTick(() => {
            this.form.setFieldsValue(this.currentRecord);
            this.formLoading = false;
          });
        }
      } catch (error) {
        console.error("获取详情数据失败", error);
      }
    },
    async handleView(val) {
      this.type = "View";
      this.handleHumanClassIdChange(val.humanClassId);
      this.dialogVisible = true;

      // 等待对话框显示并完成渲染
      await this.$nextTick();

      try {
        this.formLoading = true;
        const res = await this.$axios
          .get(`${this.humanInfo[this.personType].detailUrl}/${val.id}`)
          .finally(() => {
            this.formLoading = false;
          });
        if (res.data.code === 0) {
          let { down, up } = res.data.data;
          this.currentRecord = {
            ...down,
            ...up,
            age: this.getAge(up.idCard),
          };
          // 确保表单已渲染后再设置值
          this.$nextTick(() => {
            this.form.setFieldsValue(this.currentRecord);
            this.formLoading = false;
          });
        }
      } catch (error) {
        console.error("获取详情数据失败", error);
      }
    },
    // 计算年龄
    getAge(idCard) {
      if (!idCard) return "";
      const year = idCard.substring(6, 10);
      const month = idCard.substring(10, 12);
      const day = idCard.substring(12, 14);
      const now = new Date();
      const birthDate = new Date(year, month - 1, day);
      let age = now.getFullYear() - birthDate.getFullYear();
      const monthDiff = now.getMonth() - birthDate.getMonth();
      if (
        monthDiff < 0 ||
        (monthDiff === 0 && now.getDate() < birthDate.getDate())
      ) {
        age--;
      }
      return age;
    },
    handleRentedChange(val) {
      this.rented = val.target.value ? 1 : 0;
    },
    // 自定义新增参数格式化
    formatAddData(data) {
      return {
        ...data,
        status: 1,
      };
    },

    // 重置查询
    reset() {
      this.dateRange = [];
      this.cleanQuery();
    },

    // 处理日期范围变化
    onChange(dateStrings) {
      this.queryForm.startTime = dateStrings[0];
      this.queryForm.endTime = dateStrings[1];
    },

    // 处理 tab 切换
    handleTabChange(key) {
      this.activeTab = key;
      this.queryForm.humanClassId = this.activeTab;
      this.getList();
    },
    // 获取列表前处理查询参数 - 新增
    beforeGetList() {
      const params = { ...this.queryForm };

      // 如果有选中 tab，添加到查询参数
      if (this.activeTab) {
        params.tabType = this.activeTab; // 使用单独的参数名
      }

      return params;
    },
    togglePhoneVisibility(record) {
      this.$set(record, "showPhone", !record.showPhone);
    },
    toggleIdNumberVisibility2(record) {
      this.$set(record, "showIdCard", !record.showIdCard);
    },
    // 处理人口类型变更
    handleHumanClassIdChange(value) {
      let findOne = this.peopleTypeList.find((item) => item.value == value);

      // 清空表单中的特定人口类型字段
      const houseHoldFields = [
        "familyCity",
        "familyHeadName",
        "familyHeadPhone",
        "familyHeadIdCard",
        "familyCode",
        "marred",
        "governmentStatus",
        "education",
        "familyAddrLocation",
        "familyAddrDetail",
        "familyTrue",
        "familyNumber",
      ];

      const flowFields = [
        "familyAddr",
        "familyHeadName",
        "liveIdCard",
        "governmentStatus",
        "education",
        "familyAddrLocation",
        "familyAddrDetail",
        "moveReason",
        "applyType",
        "moveHumanIdCard",
        "pushTime",
        "idCardEffectiveDate",
        "isPointHuman",
      ];

      const overseasFields = [
        "foreignerName",
        "foreignerLastName",
        "country",
        "religion",
        "comeReason",
        "job",
        "serviceAddr",
      ];

      // 创建一个空对象来重置字段值
      let resetFields = {};

      // 根据选择的人口类型设置需要清空的字段
      if (findOne && findOne.label === "户籍人口") {
        this.personType = "houseHold";
        // 清空流动人口和境外人员字段
        [...flowFields, ...overseasFields].forEach((field) => {
          resetFields[field] = undefined;
        });
      } else if (findOne && findOne.label === "流动人口") {
        this.personType = "flow";
        // 清空户籍人口和境外人员字段
        [...houseHoldFields, ...overseasFields].forEach((field) => {
          resetFields[field] = undefined;
        });
      } else if (findOne && findOne.label === "境外人员") {
        this.personType = "overseas";
        // 清空户籍人口和流动人口字段
        [...houseHoldFields, ...flowFields].forEach((field) => {
          resetFields[field] = undefined;
        });
      }

      // 如果是编辑或添加状态，更新表单值
      if (this.type !== "View") {
        // 保存当前表单中的共用字段值
        const commonFieldValues = this.form.getFieldsValue([
          "humanName",
          "gender",
          "humanClassId",
          "idCard",
          "bornDate",
          "age",
          "addr",
          "phone",
          "rented",
          "descStr",
        ]);

        // 先重置整个表单
        this.form.resetFields();

        // 再设置回共用字段的值
        this.form.setFieldsValue({
          ...commonFieldValues,
          ...resetFields,
        });
      }
    },
    // 处理身份证号码变更，自动提取出生日期和年龄
    handleIdCardChange(e) {
      const idCard = e.target.value;
      if (idCard && idCard.length === 18) {
        try {
          // 提取出生日期 格式为YYYYMMDD
          const year = idCard.substring(6, 10);
          const month = idCard.substring(10, 12);
          const day = idCard.substring(12, 14);

          // 格式化出生日期
          const birthDate = `${year}-${month}-${day}`;

          // 计算年龄，使用现有的getAge方法
          const age = this.getAge(idCard);

          // 设置表单值
          this.form.setFieldsValue({
            bornDate: birthDate,
            age: age,
          });
        } catch (error) {
          console.error("解析身份证日期出错:", error);
        }
      }
    },
  },

  created() {
    this.getList();
    this.getPersonTypeList();
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.red {
  color: #ff4d4f;
}

@media screen and (max-width: 1300px) {
  .app {
    width: calc(100% - 50px);
  }
}

// 添加 tab 样式
.ant-tabs {
  background: #fff;
  padding: 0 20px;

  :deep(.ant-tabs-nav) {
    margin-bottom: 0;
  }

  :deep(.ant-tabs-tab) {
    padding: 12px 20px;

    &.ant-tabs-tab-active {
      font-weight: bold;
    }
  }
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-title {
  font-size: 16px;
  font-weight: bold;
  margin: 4px 0;
  padding-left: 10px;
  border-left: 4px solid #0052d9;
}

:deep(.ant-form-item) {
  margin-bottom: 4px;
}

:deep(.ant-radio-group) {
  width: 100%;
}

.compact-form {
  height: 550px;
  overflow-y: auto;
  :deep(.ant-row) {
    margin-bottom: -8px;
  }

  :deep(.ant-form-item) {
    margin-bottom: 4px;
  }

  :deep(.ant-col) {
    margin: 0;
  }

  :deep(.ant-form-item-label) {
    line-height: 28px;
    height: 28px;
    padding-bottom: 0;
  }

  :deep(.ant-form-item-control) {
    line-height: 28px;
    height: 28px;
    padding-bottom: 0;
  }

  :deep(.ant-input) {
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
  }

  :deep(.ant-select-selection) {
    height: 28px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
  }

  :deep(.ant-select-selection__rendered) {
    line-height: 26px;
    margin-top: 0;
    margin-bottom: 0;
  }

  :deep(.ant-radio-wrapper) {
    height: 28px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
  }

  :deep(.ant-form-item-required) {
    height: 28px;
    line-height: 28px;
    margin-bottom: 0;
  }

  :deep(.ant-form-item-children) {
    line-height: 28px;
    height: 28px;
  }
}

:deep(.ant-modal-body) {
  padding-top: 8px;
  padding-bottom: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

:deep(.ant-row) {
  margin: 0 -4px;
}

:deep([class^="ant-col"]) {
  padding: 0 4px;
}
</style>
